<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/${modelParamName}">${crudBean.description}管理</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="padding-top: 10px">
      <el-form :inline="true" :model="state.queryParams">
        <el-form-item>
          <el-input v-model="state.queryParams.searchCode" @keyup.enter="query()" placeholder="搜索${crudBean.description}">
            <template #append>
              <el-button icon="el-icon-search" type="primary" @click="query()"></el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
    </el-row>

    <el-row>
      <el-table :data="state.table.rows" style="width: 100%;margin-bottom: 10px" v-loading="state.loading">
        <#list columns as column>
          <#if column.columnAttributes.gridShowable>
        <el-table-column
                prop="${column.columnName}"
                label="${column.columnDesc}">
        </el-table-column>
          </#if>
        </#list>
        <el-table-column
                prop="op"
                label="操作">
          <template #default="scope">
            <el-button
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
            :page-size="state.table.pageSize"
            :page-count="state.table.pageNumber"
            :total="state.table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-row>

    <el-dialog
          :title="${modelParamName}Modal.title"
          :visible.sync="${modelParamName}Modal.show"
          width="50%">
      <el-form :model="${modelParamName}Modal.data" ref="form" :rules="rules">
        <#list columns as column>
          <#if column.columnAttributes.formShowable>
        <el-form-item label="${column.columnDesc}" label-width="100" prop="${column.columnName}">
          <el-input style="width: 100%" placeholder="${column.columnDesc}" v-model="${modelParamName}Modal.data.${column.columnName}" autocomplete="off"></el-input>
        </el-form-item>
          </#if>
        </#list>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="${modelParamName}Modal.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
  import {${modelName}} from '@/util/resource';

  export default {
    name: "${modelName}",
    data() {
      return {
        state:{
          loading: false,
          table: {
            rows: [],
            total: 0,
            pageSize: 5,
            pageNumber: 0,
          },
          queryParams: {
            searchCode: "",
          },
        },
        rules: {
        <#list columns as column>
          ${column.columnName}: [
            {required:  ${column.columnAttributes.nullable?string('true','false')}, message: "${column.columnDesc}不能为空", trigger: "blur"},
           <#if column.columnAttributes.uniqueable && column.columnAttributes.formShowable>
            {
                validator: async (rule, value, callback) => {
                    if (this.${modelParamName}Modal._data.${column.columnName} === value) {
                        return callback()
                    }
                    let res = await ${modelName}.exists("${column.columnName}", value)
                    if (res.data.valid) {
                        return callback(new Error('${column.columnDesc}已存在'))
                    } else {
                        return callback()
                    }
                }, trigger: 'blur'
            }
           </#if>
          ],
        </#list>
        },
        ${modelParamName}Modal: {
          show: false,
          title: "",
          data: {},
          _data: {},
          isAdd: false,
          loading: false
        },
      }
    },
    created() {
      this.query()
    },
    methods: {
      handleSizeChange(val) {
        this.query(val)
      },
      handleCurrentChange(val) {
        this.query(undefined, val)
      },
      async query(pageSize, pageNumber) {
        <#list columns as column>
        <#if column.columnAttributes.queryable>
        this.state.queryParams.${column.columnName} = this.state.queryParams.searchCode
        </#if>
        </#list>
        if (pageSize) {
          this.state.table.pageSize = pageSize
        }
        if (pageNumber) {
          this.state.table.pageNumber = pageNumber
        }
        await ${modelName}.paging(this.state)
      },
      async handleDelete(index, row) {
        this.$confirm('是否刪除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await ${modelName}.del(row.id)
          if (res.data.success) {
            this.$message.success('删除成功');
            await this.query()
          } else {
            this.$message.error('删除失败');
          }
        }).catch(() => {
        })
      },
      handleAdd() {
        this.userModal.show = true
        this.userModal.title = "新增${crudBean.description}"
        this.userModal.data = {}
        this.userModal._data = {}
        this.userModal.isAdd = true
      },
      handleEdit(index, row) {
        this.userModal.show = true
        this.userModal.title = "编辑${crudBean.description}"
        this.userModal.data = {...row}
        this.userModal._data = {...row}
        this.userModal.isAdd = false
      },
      handleSave() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.${modelParamName}Modal.loading = true
            let res = await ${modelName}.save(this.${modelParamName}Modal.data, this.${modelParamName}Modal.isAdd ? "post" : "put")
            if (res.data.success) {
              this.$message.success('保存成功!')
              await this.query()
            } else {
              this.$message.error('保存失败!')
            }
            this.${modelParamName}Modal.loading = false
            this.${modelParamName}Modal.show = false
          }
        })
      },
    }
  }
</script>

<style scoped>
</style>
